<template>
  <div class="hot_item_icons">
    <a href=""
    v-for="item in this.data" 
    :key="item.id" 
    @mouseover="enter(item.id)"  
    @mouseleave="leave()">
      <img src="../assets/img/hotitemicons/丰田.png" alt="" >
      <div class="hot_icons_name" v-show="seen&&item.id==count"  >
        <div class="hot_bg"></div>
        <span>{{item.iname}}</span>
      </div>
    </a>
  </div>
</template>

<script>
  export default {
      data() {
        return {
          count:0,
          seen:false,
          data:[
            {id:0,iname:"丰田",ipic:"../assets/img/hotitemicons/丰田.png"},
            {id:1,iname:"马自达",ipic:"../assets/img/hotitemicons/马自达.png"},
            {id:2,iname:"大众",ipic:"../assets/img/hotitemicons/大众.jpg"},
            {id:3,iname:"福特",ipic:"../assets/img/hotitemicons/福特.jpg"},
            {id:4,iname:"雪佛兰",ipic:"../assets/img/hotitemicons/雪佛兰.jpg"},
            {id:5,iname:"本田",ipic:"../assets/img/hotitemicons/本田.jpg"},
            {id:6,iname:"吉利",ipic:"../assets/img/hotitemicons/吉利.jpg"},
            {id:7,iname:"更多",ipic:"../assets/img/hotitemicons/更多.jpg"},
          ],
        }
      },
 methods: {
    enter(index) {
    this.seen = true;
    this.count = index;
    },
    leave() {
    this.seen = false;
    this.current = null;
    }
  },

      
  }
</script>
<style src="../assets/css/hotitemicons.css" scoped>

</style>
<style lang="scss" scoped>

</style>